/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-29 23:38:31
 * @LastEditTime: 2022-04-30 15:35:17
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    list: [
      { id: '01', title: '消息1', },
      { id: '02', title: '消息2', },
      { id: '03', title: '消息3', },
    ]
  }
  // 编程式路由
  push = (id, title) => {
    this.props.history.push('/home/message/detail', { id, title })
  }
  replace = (id, title) => {
    this.props.history.replace('/home/message/detail', { id, title })

  }
  render() {
    return (
      <div>
        <ul>
          {
            this.state.list.map(item => {
              return (
                <li key={item.id}>
                  {/* param 传参 */}
                  {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link> */}

                  {/* query 传参 */}
                  {/* <Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}

                  {/* state 传参 */}
                  <Link to={{ pathname: `/home/message/detail`, state: { id: item.id, title: item.title } }} >{item.title}</Link>
                  {/* 前进后退 */}
                  <button onClick={() => this.push(item.id, this.title)}>push</button>
                  <button onClick={() => this.replace(item.id, this.title)}>replace</button>

                </li>
              )
            })
          }
        </ul>
        {/* param 传参 */}
        {/* <Route path='/home/message/detail/:id/:title' component={Detail}></Route> */}

        {/* query 传参  */}
        {/* <Route path='/home/message/detail' component={Detail}></Route> */}

        {/* state 传参  */}
        <Route path='/home/message/detail' component={Detail}></Route>
      </div>
    )
  }
}
